<template>
  <view class="confirm-page">
    <up-overlay :show="showConfrim">
      <view class="confirm-box">
        <view class="box-title">
          <image class="title-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_icon.png" />
          <text class="title-text">
            还未完成
          </text>
          <image class="title-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_icon.png" />
        </view>

        <view class="box-content">
          还没有看完呢！确定要退出？
        </view>

        <view class="box-btn">
          <view class="btn-item btn-left" @click="handleQuite">
            退出
          </view>
          <view class="btn-item btn-right" @click="handleContinue">
            继续
          </view>
        </view>
      </view>
    </up-overlay>

    <up-overlay :show="showFinish">
      <view class="ip-box">
        <image class="box-ip" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_ip.png" />
        <view class="confirm-box">
          <view class="box-title">
            <image class="title-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_icon.png" />
            <text class="title-text">
              完成任务
            </text>
            <image class="title-img" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_icon.png" />
          </view>

          <view class="box-content">
            <image class="content-icon" src="https://cbandu.oss-cn-qingdao.aliyuncs.com/yusj/20250516/model_yes.png" />
            <text class="content-text">
              太棒啦！{{ text }}+1
            </text>
          </view>

          <view class="box-btn">
            <view class="btn-item btn-full" @click="handleEnd">
              我知道了
            </view>
          </view>
        </view>
      </view>
    </up-overlay>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});
defineProps({
  showConfrim: {
    type: Boolean,
    default: false,
  },
  showFinish: {
    type: Boolean,
    default: false,
  },
  text: {
    type: String,
    default: '',
  },
});
const emit = defineEmits(['update:showConfrim', 'update:showFinish', 'continue', 'end']);

const handleQuite = () => {
  emit('update:showConfrim', false);
  uni.navigateBack();
};
const handleContinue = () => {
  emit('update:showConfrim', false);
  emit('continue');
};
const handleEnd = () => {
  emit('update:showFinish', false);
  emit('end');
};
</script>

<style lang="scss" scoped>
.confirm-page {
  position: relative;
  height: 100%;

  .u-transition {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ip-box {
    position: relative;
    width: 630rpx;
    padding-top: 169rpx;

    .box-ip {
      position: absolute;
      left: 133rpx;
      top: 0;
      width: 336rpx;
      height: 228rpx;
    }
  }

  .confirm-box {
    position: relative;
    width: 630rpx;
    padding: 40rpx;
    border-radius: 32rpx;
    overflow: hidden;
    background: #fff;

    .box-title {
      display: flex;
      align-items: center;
      justify-content: center;

      .title-img {
        width: 22rpx;
        height: 22rpx;
      }

      .title-text {
        padding: 0 16rpx;
        font-size: 44rpx;
        color: #0F194D;
        line-height: 66rpx;
      }
    }

    .box-content {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50rpx 0;

      .content-icon {
        width: 64rpx;
        height: 64rpx;
        margin-right: 24rpx;
      }

      .content-text {
        font-size: 32rpx;
        color: #0F194D;
        line-height: 48rpx;
        text-align: center;
      }
    }

    .box-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .btn-item {
        padding: 0 92rpx;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFCD29;
        line-height: 88rpx;
        border-radius: 46rpx;
        border: 2rpx solid #FFCD29;
      }

      .btn-right {
        background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
        color: #FFFFFF;
        border: none;
        line-height: 92rpx;
      }

      .btn-full {
        flex: 1;
        background: linear-gradient( 90deg, #FFA029 0%, #FFCD29 100%);
        color: #FFFFFF;
        border: none;
        line-height: 92rpx;
        text-align: center;
      }
    }
  }
}
</style>

<style lang="scss">
.u-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
